<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title></title>
  <!-- css -->
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/mui.css" />
  <link rel="stylesheet" href="css/index.css" />
  <link rel="stylesheet" href="css/login.css" />
  <link rel="stylesheet" href="css/icon-extra.css" />
  <link rel="stylesheet" href="css/icon-daguanjia.css" />
  <!-- css-end -->
  <!-- js -->
  <script src="js/mui.js"></script>
  <script src="js/common.js"></script>
  <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3&ak=密钥"></script>
  <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
  <script type="text/javascript" src="js/get.localcity.js"></script> -->
  <!-- js-end -->
</head>
<!--L31-移动WEB：100.5vw-->
<!--L31-APP：84.5vw-->
<style type="text/css">
  .jf-vertical {
    vertical-align: middle;
  }
  
  .mui-control-content9 {
    height: 100.5vw !important;
  }
  
  .ind-width {
    width: 100vw !important;
  }
  
  .ind-spb-width {
    width: 50vw;
  }
  
  .ind-logout {
    padding: 0 15px;
  }
  
  .ind-grid {
    margin-bottom: 15px;
  }
  
  .mui-grid-view.mui-grid-9 {
    background-color: #fff;
  }
  
  .ind-a-box {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
  }
  
  .ind-icon-size {
    font-size: 1em !important;
  }
  
  .ind-media-title {
    width: auto !important;
    margin-top: 0 !important;
    margin-left: 5px;
  }
</style>

<body>
  <header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">大管家</h1>
  </header>
  <div class="mui-content">
    <div class="ind-grid">
      <ul class="mui-table-view mui-grid-view mui-grid-9 ind-ul-color" style="height: 80px">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
          <a href="javascript:;" class="ind-a-box ind-login">
            <span class="mui-icon mui-icon-contact ind-icon-size"></span>
            <div class="mui-media-body ind-media-title">我的</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
          <a href="javascript:;" class="ind-a-box ind-login">
            <span class="mui-icon-extra icon-dgj-chengshifuwu ind-icon-size"></span>
            <div class="mui-media-body ind-media-title">城市</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
          <a href="javascript:;" class="ind-a-box ind-login">
            <span class="mui-icon-extra icon-dgj-denglu ind-icon-size"></span>
            <div class="mui-media-body ind-media-title">登录</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
          <a href="javascript:;" class="ind-a-box ind-login">
            <span class="mui-icon mui-icon-email ind-icon-size"></span>
            <div class="mui-media-body ind-media-title">消息</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
          <a href="javascript:;" class="ind-a-box ind-login">
            <span class="mui-icon-extra icon-dgj-guanliyuan_guanliyuanrizhi ind-icon-size"></span>
            <div class="mui-media-body ind-media-title">管理</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
          <a href="javascript:;" class="ind-a-box ind-login">
            <span class="mui-icon mui-icon-gear ind-icon-size"></span>
            <div class="mui-media-body ind-media-title">设置</div>
          </a>
        </li>
      </ul>
    </div>

    <div id="slider" class="mui-slider">
      <div class="mui-slider-group mui-slider-loop">
        <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
        <div class="mui-slider-item mui-slider-item-duplicate">
          <a href="#" class="ind-login">
            <img src="images/cbd.jpg" style="height: 55vw;">
          </a>
        </div>
        <!-- 第一张 -->
        <div class="mui-slider-item">
          <a href="#" class="ind-login">
            <img src="images/xuanchuan.jpg" style="height: 55vw;">
          </a>
        </div>
        <!-- 第二张 -->
        <div class="mui-slider-item">
          <a href="#" class="ind-login">
            <img src="images/shuijiao.jpg" style="height: 55vw;">
          </a>
        </div>
        <!-- 第三张 -->
        <div class="mui-slider-item">
          <a href="#" class="ind-login">
            <img src="images/yuantiao.jpg" style="height: 55vw;">
          </a>
        </div>
        <!-- 第四张 -->
        <div class="mui-slider-item">
          <a href="#" class="ind-login">
            <img src="images/cbd.jpg" style="height: 55vw;">
          </a>
        </div>
        <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
        <div class="mui-slider-item mui-slider-item-duplicate">
          <a href="#" class="ind-login">
            <img src="images/xuanchuan.jpg" style="height: 55vw;">
          </a>
        </div>
      </div>
      <div class="mui-slider-indicator">
        <div class="mui-indicator mui-active"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
      </div>
    </div>

    <div id="tabBar" class="mui-slider">
      <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted ind-width">
        <a class="mui-control-item" href="#item1mobile">需求帮助者</a>
        <a class="mui-control-item" href="#item2mobile">提供帮助者</a>
      </div>

      <div id="sliderProgressBar" class="mui-slider-progress-bar ind-spb-width"></div>

      <div class="mui-slider-group" id="tabBarContainer" style="height: 76vw;">
        <div id="item1mobile" class="mui-slider-item mui-control-content mui-active" style="border: none;">
          <div id="scroll1" class="mui-scroll-wrapper">
            <div class="mui-scroll">
              <!--老板发送任务-->
              <div class="jf-task">
                <div class="jsg-up">
                  <div class="jsgu-left">
                    <h4>大管家</h4>
                    <p>大管家生活帮，帮助你生活的点点滴滴</p>
                  </div>
                  <div class="jsgu-right">
                    <img src="images/richu.png" alt="日出" />
                  </div>
                </div>
                <div class="jsg-down">
                  <button type="button" class="mui-btn sendTask ind-login" style="margin-right: 10px;">发布需求技术帮助</button>
                  <button type="button" class="mui-btn sendTask ind-login" style="margin-left: 10px;">发布需求普通帮助</button>
                </div>
              </div>
              <!--老板发任务日-->
              <div class="jf-task-box">
                <p class="jf-task-title">发现</p>
                <div class="jf-task-content">
                  <div class="mui-table-view-cell">
                    <a href="javascript:;" class="mui-navigate-right ind-login">
                      <span class="mui-icon-extra icon-dgj-jishu jf-topic"></span>附近提供技术帮助</a>
                  </div>
                  <div class="mui-table-view-cell">
                    <a href="javascript:;" class="mui-navigate-right ind-login">
                      <span class=" mui-icon-extra mui-icon-extra-topic jf-topic "></span>附近提供普通帮助</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div id="item2mobile" class="mui-slider-item mui-control-content " style="border: none; ">
          <div id="scroll2 " class="mui-scroll-wrapper ">
            <div class="mui-scroll ">
              <div class="mui-loading " style="margin-top: 20vw; ">
                <div class="mui-spinner ">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="jf-task-box " style="padding-top: 0;">
      <p class="jf-task-title ">大管家服务</p>
      <div class="jf-task-content ">
        <div class="mui-table-view-cell ">
          <a href="# " class="mui-navigate-right mnr-flex ind-login ">
            <div class="mnr-content-left ">
              <span class="mui-icon-extra icon-dgj-jifen jf-topic "></span>积分商城
            </div>
          </a>
        </div>
        <div class="mui-table-view-cell ">
          <a href="# " class="mui-navigate-right mnr-flex ind-login ">
            <div class="mnr-content-left ">
              <span class="mui-icon-extra icon-dgj-baoxianfuwu jf-topic "></span>保险
            </div>
          </a>
        </div>
        <div class="mui-table-view-cell ">
          <a href="# " class="mui-navigate-right mnr-flex ind-login ">
            <div class="mnr-content-left ">
              <span class="mui-icon-extra icon-dgj-qianbao jf-topic "></span>钱包·支付
            </div>
          </a>
        </div>
        <div class="mui-table-view-cell ">
          <a href="# " class="mui-navigate-right mnr-flex ind-login ">
            <div class="mnr-content-left ">
              <span class="mui-icon-extra icon-dgj-iconset0263 jf-topic "></span>VR游戏
            </div>
          </a>
        </div>
        <div class="mui-table-view-cell ">
          <a href="# " class="mui-navigate-right mnr-flex ind-login ">
            <div class="mnr-content-left ">
              <span class="mui-icon-extra icon-dgj-huiyuan jf-topic "></span>会员招募
            </div>
          </a>
        </div>
      </div>
    </div>

  </div>
</body>

<script src="js/app.js"></script>
<script src="js/http.js"></script>

<script type="text/javascript">
  window.$ = mui;
  window.onload = function() { // console.log('wo');
    init(mui);

    switchTab();

    // localcity.getLocation(getCityCB);
  }

  function init($) {
    $('#slider').slider({
      interval: 3000
    });

    toggleTabBar($);

    /*let sendTasks = Array.from(document.querySelectorAll('.sendTask'));
    sendTasks.map((value, index) => {
      value.addEventListener('click', () => {
        location.href = 'pages/add_task.html';
      });
    });*/

    var indLoginEle = Array.from(document.querySelectorAll('.ind-login'));
    indLoginEle.map(function(val, ind) {
      val.addEventListener('tap', jumpLogin.bind(this, $))
    });

  }

  document.addEventListener('DOMContentLoaded', function() {
    verifyToken();
  });

  function verifyToken() {
    var $state = JSON.parse(localStorage.getItem('$state'));
    if (!$state) return;

    http.postToken({
      url: API.postVerifyToken,
      data: { token: $state.token },
      success: function(res) {
        console.log('res-->>', res);
        if (res.data) location.href = 'index_log.html'
      },
      error: function(err) {
        console.log('请求失败');
      }
    });

  }

  function needHelp() {
    $.openWindow({
      // url: 'pages/add_task.html',
      url: 'pages/login.html',
      id: 'add_task',
      show: {
        aniShow: 'pop-in'
      },
      waiting: {
        autoShow: false
      }
    })
  }

  function jumpLogin($) {
    $.openWindow({
      url: 'pages/login.html',
      id: 'login',
      show: {
        aniShow: 'pop-in'
      },
      waiting: {
        autoShow: false
      }
    });
  }

  function toggleTabBar($) {
    $('.mui-scroll-wrapper').scroll({
      indicators: false //是否显示滚动条
    });

    // <button type="button " class="mui-btn ">查看附近任务</button>
    var html2 =
      '<div class="jf-task"><div class="jsg-up"><div class="jsgu-left"><h4>大管家</h4><p>大管家生活帮，帮助你生活的点点滴滴</p></div><div class="jsgu-right"><img src="images/richu.png" alt="日出"></div></div><div class="jsg-down"><button type="button" class="mui-btn sendTask ind-login-extra" style="margin-right:10px">发布提供技术帮助</button> <button type="button" class="mui-btn sendTask ind-login-extra" style="margin-left:10px">发布提供普通帮助</button></div></div><div class="jf-task-box"><p class="jf-task-title">发现</p><div class="jf-task-content"><div class="mui-table-view-cell"><a href="javascript:;" class="mui-navigate-right ind-login-extra"><span class="mui-icon-extra icon-dgj-jishu jf-topic"></span>附近需求技术帮助</a></div><div class="mui-table-view-cell"><a href="javascript:;" class="mui-navigate-right ind-login-extra"><span class="mui-icon-extra mui-icon-extra-topic jf-topic"></span>附近需求普通帮助</a></div></div></div>';
    var item2 = document.getElementById('item2mobile');
    var tabBarContainer = document.getElementById('tabBarContainer');
    document.getElementById('tabBar').addEventListener('slide', function(e) {
      if (e.detail.slideNumber === 0) {
        // item2.style.height = '66vw';
        tabBarContainer.style.height = '76vw';
      }

      if (e.detail.slideNumber === 1) {
        tabBarContainer.style.height = '76vw';
        if (item2.querySelector('.mui-loading')) {
          // tabBarContainer.style.height = '43vw';
          setTimeout(function() {
            item2.querySelector('.mui-scroll').innerHTML = html2;
            /* var offerHelpEle = document.getElementById('offerHelp');
            offerHelp.addEventListener('tap', jumpLogin.bind(this, $)); */

            $('.ind-login-extra').each(function(idx, el) {
              el.addEventListener('tap', jumpLogin.bind(this, $));
            });

          }, 500);
        }
      }
    });
  }

  function getCityCB(baiduAddress) {
    /*var address = "百度标注： " + baiduAddress.province + ", " + baiduAddress.city + ", " + baiduAddress.district + ", " + baiduAddress.street + ", " + baiduAddress.streetNumber;
    alert(address);*/
    /* let cityEle = document.getElementById('city'),
      curAddress = JSON.stringify(baiduAddress);
    city = baiduAddress.city

    localStorage.setItem('curAddress', curAddress);
    cityEle.innerText = city; */

    localStorage.setItem('$baiduAddress', JSON.stringify(baiduAddress));
  }

  function showCitys() {
    location.href = "pages/citys.html "
  }

  function toPersonCenter() {
    //  location.href = "pages/person_center.html "
    location.href = "pages/login.html "
  }

  function switchTab() {
    let aTags = document.querySelectorAll('.jf-list a'),
      jfMembers = document.querySelectorAll('.jf-slider-group>div');

    aTags = Array.from(aTags);
    jfMembers = Array.from(jfMembers);

    aTags.map(function(value, index) {
      value.onclick = function() {
        jfMembers.map((val, ind) => {
          aTags[ind].className = 'jf-item';
          jfMembers[ind].style.display = 'none';
        });
        aTags[index].className = 'jf-item jf-item-active';
        jfMembers[index].style.display = 'block';
      }
    });
  }
</script>

</html>